<template>
    <div class="typeselect">
        <div class="title" v-if="isShowLabel">
            {{label}}
        </div>
        <div class="select_con">
            <div v-if="isShowAll" class="select_con_item" :class="{active: !value}" @click="handleAllClick({})">
                全部
            </div>

            <div v-for="(item, index) in innerData" class="select_con_item" :class="{active: item[props.value] == value}" :key="index"
                @click="handleClick(item, index)">
                {{item[props.label]}}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        label: {
            type: String,
            default: '',
        },
        isShowLabel: {
            type: Boolean,
            default: true,
        },
        isShowAll: {
            type: Boolean,
            default: true,
        },
        data: {
            type: Array,
            default: () => [],
        },
        activeValue: {
            type: String,
            default: '',
        },
        value: {
            type: String,
            default: '',
        },
        props: {
            type: Object,
            default: () => ({
                label: 'dicname',
                value: 'diccode',
            }),
        },
    },
    data() {
        return {};
    },
    computed: {
        innerData: function () {
            return this.data.map((item) => {
                return {
                    ...item,
                    isselect: false,
                };
            });
        },
        model: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit('input', val);
            },
        },
    },
    methods: {
        handleClick(val, index) {
            this.model = val[this.props.value];
            this.$emit('click', val, index + 1);
        },
        handleAllClick() {
            this.model = '';

            let item = {
                [this.props.value]: '',
                [this.props.label]: '全部',
                children: null,
            };

            this.$emit('click', item, 0);
        },
    },
    mounted() {},
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';

$height: 48px;

.typeselect {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;

    .title {
        padding: 0 16px 0 0;
        min-width: 82px;
        font-weight: 800;
        line-height: $height;
        height: $height;
    }
    .select_con {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        // align-content: flex-start;
        // justify-content: center;
        flex-wrap: wrap;
        height: $height;

        .select_con_item {
            min-width: 30px;
            text-align: center;
            cursor: pointer;
            margin-right: 12px;
            padding: 16px;
            line-height: 1em;
            border: 1px solid #ccc;

            &.active,
            &:hover {
                // background-color: $primaryColor;
                background-color: #ccd9f8;
                border: 1px solid $primaryColor;
                color: $primaryColor;
            }
        }
    }
}
</style>
